
<template>
	<view class="root">
		<view v-if="isSearch" class="mb-30">
			<view class="header bgc-fff fixed width-100vw pr-30 pl-30">
				<view class="navigate-bar fd-row ai-center height-88">
					<view
						:class="[
							`search-container fd-row ai-center f1 bgc-f2 br-10`,
						]"
					>
						<image
							class="width-30 height-30 pl-14"
							src="/static/imgs/icon-search0.png"
						/>
						<input
							class="pt-12 pb-12 f1 pl-14 pr-14"
							placeholder="请输入驿站名称"
							confirm-type="search"
							@input="search"
							:focus="true"
							:adjust-position="false"
							placeholder-class="color-8f9aa8 fs-24"
						/>
					</view>
					<button
						@click="goBack"
						class="bgc-8ec5fc color-fff fs-30 cancle-btn ml-12"
					>
						取消
					</button>
				</view>
			</view>
			<view class="navigate-bar" />
		</view>
		<view v-else class="header pr-30 pl-30 mb-30">
			<view class="fixed width-100vw pl-30 pr-30 bgc-f7f4fc">
				<view class="navigate-bar fd-row ai-center">
					<text class="color-1a fs-46 f1 fw-700">选择驿站</text>
					<view hover-class="btn-hover" @click="toSearch">
						<image
							class="icon"
							src="/static/imgs/icon-search.png"
						/>
					</view>
				</view>
			</view>
			<view class="navigate-bar" />
		</view>
		<scroll-view class="main f1" :scroll-y="true">
			<navigator
				v-for="(item, index) in stations"
				:key="index"
				:url="`/pages/pre-order?sid=${item.sid}&latitude=${positions.latitude}&longitude=${positions.longitude}`"
				class="section bgc-fff mb-30 ml-30 mr-30"
			>
				<label class="title">
					<image
						class="width-28 height-26"
						src="/static/imgs/icon-station.png"
					/>
					<text class="fs-28 ml-10 f1 fw-700 color-333">
						{{ item.name }}
					</text>
					<text v-if="item.city" class="fs-20 city ml-12">
						{{ item.city }}
					</text>
					<text v-if="item.metre" class="fs-20 range ml-12">
						{{ item.metre }}
					</text>
				</label>
				<view class="subject f1 fd-row jc-sb ai-center mt-18">
					<view>
						<text class="address fs-22 color-8f9aa8 ml-40 mt-12">
							{{ item.address }}
						</text>
						<view class="tel fd-row ml-40 ai-center mt-24">
							<image
								class="width-30 height-30"
								src="/static/imgs/icon-tel.png"
							/>
							<text class="fs-26 color-4388e7 ml-10">
								{{ item.mobile }}
							</text>
						</view>
					</view>
					<image
						class="example-station ml-18 br-8"
						:src="item.img"
						mode="aspectFill"
					/>
				</view>
			</navigator>
			<text
				v-if="!stations.length && !isLoading"
				class="color-666 fs-28 ml-18 text-center mt-30"
			>
				您还没有订阅过社区，快去加入社区吧！
			</text>
			<label v-if="isLoading" class="ai-center jc-center">
				<image
					class="width-46 height-46"
					src="/static/imgs/icon-loading.gif"
					mode="aspectFill"
				/>
				<text class="color-666 fs-28 ml-18">加载中...</text>
			</label>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "pick-up",
		data: () => ({
			isSearch: false,
			stations: [],
			stationContainer: [],
			positions: { latitude: 0, longitude: 0 },
			isLoading: true,
		}),
		onLoad() {
			// #ifndef H5
			uni.getLocation({
				success: ({ latitude, longitude }) => {
					this.positions = { latitude, longitude };
					this.getData();
				},
				fail: () =>
					uni.showToast({
						title: "获取位置信息失败, 请允许相关权限后重试",
						icon: "none",
					}),
			});
			// #endif

			// #ifdef H5
			this.getData();
			// #endif
		},
		onBackPress() {
			return this.isSearch;
		},
		methods: {
			toSearch() {
				this.isSearch = true;
			},
			goBack() {
				this.isSearch = false;
				this.stations = this.stationContainer;
			},
			search(e) {
				this.stations = this.stationContainer.filter(
					(item) => item.name.indexOf(e.detail.value) !== -1
				);
			},
			getData() {
				const { latitude, longitude } = this.positions;
				uni.fetch("/api/home/getStation", {
					data: { latitude, longitude },
					success: (res) => {
						this.stationContainer = this.stations = res;
						this.isLoading = false;
					},
				});
			},
		},
	};
</script>

<style scoped>
	.root {
		padding-bottom: 50px;
	}
	.example-station {
		width: 140rpx;
		height: 140rpx;
	}
	.section {
		box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
		border-radius: 10rpx;
		padding: 30rpx 22rpx;
	}
	.city,
	.range {
		border-width: 1rpx;
		border-style: solid;
		padding: 4rpx 8rpx;
		border-radius: 4px;
	}
	.city {
		border-color: #4371ff;
		color: #4371ff;
	}
	.range {
		border-color: #c44dff;
		color: #c44dff;
	}

	.header {
		z-index: 9;
	}
	.navigate-bar {
		height: 60px;
	}
	.icon {
		width: 114rpx;
		height: 114rpx;
	}

	.main {
		overflow: hidden;
	}

	.cancle-btn {
		line-height: 2;
	}
	.title {
		display: inline-block;
	}
	.title text {
		display: inline;
	}
</style>